<template>
	<div id="breadcrumb">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>
				<router-link v-if="$route.path !== '/dashboard'" :to="{path: '/dashboard'}">
					<span><e-icon icon-name="el-icon-s-home"></e-icon>{{$t("dashboard")}}</span>
				</router-link>
				<span v-else class="current-item"><e-icon icon-name="el-icon-s-home"></e-icon>{{$t("dashboard")}}</span>
			</el-breadcrumb-item>
			<el-breadcrumb-item v-for="(item,index) in breadcrumbItems" :key="index" class="breadcrumb-item">
				<router-link v-if="breadcrumbItems != null && index !== (breadcrumbItems.length - 1) && item.path" :to="item.path">
					<span><e-icon :icon-name="item.icon"></e-icon>{{$t(item.name)}}</span>
				</router-link>
				<span v-if="breadcrumbItems != null && index === (breadcrumbItems.length - 1)" class="current-item">
					<e-icon :icon-name="item.icon"></e-icon>{{$t(item.name)}}</span>
				<span v-else><e-icon :icon-name="item.icon"></e-icon>{{$t(item.name)}}</span>
			</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>

<script>
export default {
	name: "bread-crumb",
	data() {
		return {};
	},
	computed: {
		breadcrumbs() {
			if (typeof this.menus === "string") {
				return this.breadcrumbsHandler.createBreadCrumbs(JSON.parse(this.menus));
			}
			return this.breadcrumbsHandler.createBreadCrumbs(this.menus);
		},
		breadcrumbItems() {
			if (this.$route.path === "/dashboard") {
				return [];
			}
			return this.breadcrumbs[this.$route.path];
		}
	},
	methods: {}
};
</script>
<style scoped>
#breadcrumb {
	line-height: 36px;
}

#breadcrumb >>> .el-icon-arrow-right {
	color: #606266;
}

#breadcrumb >>> .el-breadcrumb {
	font-size: 20px;
	text-align: left;
	margin-top: 28px;
	margin-left: 10px;
}

#breadcrumb a:hover {
	cursor: pointer;
	color: #0977EA;
}

#breadcrumb .fa {
	margin: 0 10px 3px 5px;
	font-size: 17px;
}

#breadcrumb i, svg {
	margin-left: 5px;
	margin-right: 10px;
	font-size: 20px;
}

.current-item {
	color: #0977EA;
}
</style>
